<template>
  <div>
    <section class="header">
      <i class="iconfont iconfanhui1" @click="goBack()"></i>
      <span @click="goBack()">添加个体</span>
    </section>
    <div class="main-content clearfix">
      <div class="content-header clearfix">
        <div class="title">账户主体</div>
      </div>
      <div class="input-box">
        <section>
          <span class="title required"> 姓名 </span>
          <span class="value">
            <el-input
              v-model="companyInfo.companyName"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <!-- <div class="input-box">
        <section>
          <span class="title">
            营业执照
          </span>
          <span class="value">
            <el-input
              v-model="companyInfo.businessNo"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div> -->
      <div class="input-box">
        <span class="title required"> 注册地址 </span>
        <span class="value">
          <el-cascader
            v-model="registerAddress"
            :options="addressList"
          ></el-cascader>
        </span>
      </div>
      <div class="input-box">
        <section>
          <span class="title">详细地址</span>
          <span class="value">
            <el-input
              v-model="registAddress"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div>

      <div class="content-header clearfix">
        <div class="title">联系人</div>
      </div>
      <div class="input-box">
        <section>
          <span class="title required"> 姓名 </span>
          <span class="value">
            <el-input
              v-model="companyInfo.contactName"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">电子邮箱</span>
          <span class="value">
            <el-input
              v-model="companyInfo.contactEmail"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title required"> 手机号 </span>
          <span class="value">
            <el-input
              v-model="companyInfo.contactPhone"
              placeholder="请填写"
              maxlength="11"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">固定电话</span>
          <span class="value">
            <el-input
              v-model="companyInfo.contactTel"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="content-header clearfix">
        <div class="title">发票信息</div>
      </div>
      <div class="input-box">
        <section>
          <span class="title">开票抬头</span>
          <span class="value">
            <el-input
              v-model="companyInfo.billingRise"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">纳税人识别号</span>
          <span class="value">
            <el-input
              v-model="companyInfo.taxpayerNo"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <!-- <div class="input-box">
        <section>
          <span class="title">发票类型</span>
          <span class="value">
            <el-select
              v-model="companyInfo.invoiceType"
              
              placeholder="请选择发票类型"
            >
              <el-option
                label="普通电子发票"
                :value="1"
              ></el-option>
              <el-option
                label="不需要发票"
                :value="2"
              ></el-option>
            </el-select>
          </span>
        </section>
      </div> -->
      <!-- <div class="input-box">
        <section>
          <span class="title">特殊开票需求</span>
          <span class="value">
            <el-select
              v-model="companyInfo.specialeNeed"
              placeholder="请选择发票类型"
            >
              <el-option
                label="正常开票"
                :value="1"
              ></el-option>
              <el-option
                label="只开服务费金额"
                :value="2"
              ></el-option>
              <el-option
                label="不开服务费金额"
                :value="3"
              ></el-option>
            </el-select>
          </span>
        </section>
      </div> -->
      <div class="input-box">
        <section>
          <span class="title">收票邮箱</span>
          <span class="value">
            <el-input
              v-model="companyInfo.collectEmail"
              placeholder="请填写"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
    </div>
    <div class="button-box">
      <el-button @click="goBack()">返回</el-button>
      <el-button
        type="primary"
        v-if="isShow"
        :loading="submitLoading"
        @click="submit()"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
import addressList from "@/assets/js/address";
export default {
  name: "addIndividual",
  data() {
    return {
      isShow: false,
      registerAddress: [],
      registAddress: "",
      addressList: [],
      companyInfo: {
        invoiceType: 1,
        specialeNeed: 1,
        point: 0,
      },
      submitLoading: false,
      bitOptions: [
        {
          value: 0,
          label: 0,
        },
        {
          value: 1,
          label: 1,
        },
        {
          value: 2,
          label: 2,
        },
        {
          value: 3,
          label: 3,
        },
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    submit() {
      if (
        !this.companyInfo.companyName ||
        !this.companyInfo.contactName ||
        !this.companyInfo.contactPhone
      ) {
        this.$message.warning("请输入必填项");
        return;
      }
      if (this.registerAddress.length <= 0) {
        this.$message({
          message: "请选择注册地址",
          type: "warning",
          duration: 1500,
        });
        return;
      }
      this.companyInfo.infoType = "1";
      this.companyInfo.serverFee = 0;
      this.companyInfo.address =
        JSON.stringify(this.registerAddress) + "|" + this.registAddress;
      this.submitLoading = true;
      let reqReport = reqRep({
        traCode: "_ADD_COMPANY",
        data: this.companyInfo,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
          this.submitLoading = false;
        } else {
          this.$message({
            message: "新增成功",
            type: "success",
          });

          this.goBack();
          this.submitLoading = false;
        }
      });
    },
  },
  created() {
    if (
      sessionStorage.getItem("KEY") == "A" ||
      sessionStorage.getItem("KEY") == "O"
    ) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    this.addressList = addressList;
  },
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  margin-right: 5px;
  cursor: pointer;
}
.header span {
  cursor: pointer;
}
.main-content {
  padding: 0 30px 30px;
}
.content-header {
  display: block;
  border-top: 1px solid #eee;
  color: #333;
  font-size: 16px;
  padding: 20px 0;
  clear: both;
}
.content-header .title {
  display: inline-block;
}
.edit {
  float: right;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
h2 {
  display: block;
  border-top: 1px solid #eee;
  color: #333;
  font-size: 16px;
  padding: 30px 0;
  clear: both;
}
.content-header:first-child {
  border-top: 0;
}
.input-box {
  float: left;
  width: 420px;
  margin-right: 40px;
  margin-bottom: 20px;
}
.input-box .title {
  display: inline-block;
  margin-right: 10px;
  width: 84px;
  color: #666;
}
.input-box .title i,
.error {
  color: #f56c6c;
}
.input-box .value,
.input-box input {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  outline: none;
}

.error {
  text-align: center;
}

.button-box {
  clear: both;
  border-top: 1px solid #eee;
  padding: 30px;
}
.button-box div {
  display: inline-block;
  width: 50px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.comfirm {
  margin-left: 10px;
  color: #fff;
  background-color: #13cb6e;
}
.el-input,
.el-select {
  width: 228px;
}
.el-form-item {
  width: 260px;
  margin: 0 auto;
}
.tip {
  width: 260px;
  text-align: center;
  background: #ccc;
  padding: 5px 10px;
  margin: 10px auto;
  cursor: pointer;
}
h4 {
  width: 260px;
  margin: 0 auto 22px;
}
</style>
